<template>
	<view>
		<!-- <view class="setall" @click="gitsus">
			<view class="my-books">
				<uni-icons type="search" size="17"></uni-icons>
				<text class="ss" @click="gitsus">搜索</text>
			</view>
		</view> -->
		<view class='home'>
			<swiper indicator-dots circular autoplay interval=3000>
				<swiper-item v-for="(item,index) in swipers" :key="index">
					<image :src="item" style="heightFix: 500px;width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="prcoudet">
			<navigator url="../series/series">
				<button class="button-yuanjiao" hover-class="bg-click">油纸伞系列</button>
			</navigator>
			<navigator url="../addprodce/addprodce">
				<button class="button-yuanjiao" hover-class="bg-click">定制商品</button>
			</navigator>
		</view>

		<scroll-view class="cate-list" scroll-y="true">
			<view class="imageScrollCssOut">
				<view v-for="(item,i) in typeList" :key="i" class="imageScrollCssIn"
					hover-class="imageScrollCssInHover">
					<image :src="item.goodurl" />
					<text>{{item.googname}}</text>
				</view>
				<view v-if="(typeList.length%2)!=0" class="imageScrollCssIn">
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swipers: [
					'../../static/tabbar/log01.jpg',
					"../../static/tabbar/log02.jpg",
					"../../static/tabbar/bingjiang_02.jpg",
					"../../static/tabbar/one.jpg",
				],
				tabCurrentIndex: '0',
				typeList: []
			}
		},
		methods: {
			gitsus() {
				uni.navigateTo({
					url: "/pages/setcher/setcher",
				})
			},
			girunl(index) {
				uni.navigateTo({
					url: "/pages/download/download?id=" + this.typeList[index].googId
				})
			}
		},
		onLoad() {
			this.tabCurrentIndex = 0;
			uni.request({
				url: this.api.commodity,
				method: "GET",
			}).then(data => {
				let [err, res] = data
				this.typeList = res.data
				console.log(res.data)
				for (let i = 0; i < this.typeList.length; i++) {
					if (i >= 3)
						break;
					// else
					// 	this.swipers[i + 2] = this.typeList[i].goodurl;
				}

			})
		}
	}
</script>

<style>
	.imageScrollCssIn {
		width: 35%;
		margin: 0 20px 10px 20px;
		text-align: center;
		display: flex;
		flex-direction: column;
	}

	.imageScrollCssInHover {
		color: #007AFF;
	}

	.imageScrollCssOut {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.imageScrollCssOut image {
		width: 100%;
		height: 35vw;
		object-fit: cover;
		border: solid 1px;
		border-radius: 50%;
	}

	.cate-list {
		height: 500px;
	}

	.setall {
		height: 50px;
		background-color: #2b4b6b;
		display: flex;
		align-items: center;
		padding: 0px 10px;
	}

	.my-books {
		height: 36px;
		background-color: #ffffff;
		border-radius: 18px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ss {
		font-size: 15px;
	}

	.icons {
		position: absolute;
		right: 20px;
		top: 5px;
	}

	swiper {
		height: 500rpx;
	}

	.prcoudet {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.prcoudet navigator {
		width: 50%;
	}

	.button-yuanjiao {
		margin: 0 20px 0px 20px;
		width: 80%;
		height: 50px;
		line-height: 50px;
		border-radius: 20px;
		background: linear-gradient(to right, #2b4b6b, #a7a9ff);
		font-size: 14px;
		color: #FFFFFF;
	}
</style>
